import React, { Component } from 'react';
import { NavBar, Checkbox, Button, ActionSheet } from 'antd-mobile'
import { EditSOutline } from 'antd-mobile-icons'
import '../styles/Address.scss'
import * as service from "../api/index"

class Address extends Component {
    constructor(props) {
        super(props)
        this.state = {
            canglist: [],
            visible: false,
            actions: [
                { text: '修改', key: 'edit', },
                {
                    text: '删除',
                    key: 'delete',
                    description: '删除后数据不可恢复',
                    danger: true,
                    bold: true,
                },
            ],
            add_id: '',
            item: {}

        }
    }

    async componentDidMount() {
        // 地址列表
        this.address_list()
    }
    // 地址列表
    async address_list() {
        var res = await service.address_list({ userid: localStorage.getItem('userid') })
        if (res.data.data) {
            this.setState({ canglist: res.data.data })
        }
    }
    //编辑列表
    async bianji(action) {
        // console.log(action);
        if (action.text == '删除') {
            var res = await service.address_del({ addressid: this.state.add_id })
            this.address_list()
        }
        if (action.text == '修改') {
            this.props.history.push({ pathname: '/gai_address', state: this.state.item })

        }

    }

    item(item) {
        // console.log(item);
        this.setState({ add_id: item.addressid, item: item }, () => {
            // console.log(this.state.add_id);
            // console.log(this.state.item);
        })
    }
    render() {
        return (
            <div className='address'>
                <NavBar onBack={() => { this.props.history.go(-1) }}>地址列表</NavBar>
                <div className="list">
                    {
                        this.state.canglist.map((item, index) => {
                            return (
                                <div className="item" key={index} onClick={() => { this.item(item) }}>
                                    <Checkbox></Checkbox>
                                    <div className='you'>
                                        <div className='zhong'>
                                            <span>{item.name} {item.tel}
                                                {
                                                    item.isDefault ?
                                                        <span style={{ backgroundColor: 'red', color: 'white', marginLeft: '10px', padding: '2px 5px' }}>默认</span> :
                                                        ''
                                                }
                                            </span>
                                            <span>{item.province}{item.city}{item.county}{item.addressDetail}</span>
                                        </div>
                                        <EditSOutline onClick={() => { this.setState({ visible: true }) }} />
                                        <ActionSheet
                                            visible={this.state.visible}
                                            actions={this.state.actions}
                                            onAction={(action) => { this.bianji(action) }}

                                            onClose={() => { this.setState({ visible: false }) }}
                                        />
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <Button block shape='rounded' color='danger'
                    onClick={() => { this.props.history.push('/addaddress') }}
                >
                    新增地址
                </Button>
            </div>
        );
    }
}

export default Address;